Color 顏色
一、顏色的作用與系統適配 Color Fundamentals & System Integration
顏色可增強溝通、表達品牌、傳遞狀態資訊，並提供視覺連續性。Apple 平臺定義了動態系統顏色，能根據背景、系統外觀模式（淺色/深色）、無障礙設定（如高對比度）自動適配。
建議優先使用系統顏色，使 App 體驗在裝置上更加一致。也可以使用自定義顏色增強視覺個性，但需注意相容性。
二、顏色使用最佳實踐 Best Practices
1. 避免色彩混淆
- 同一顏色不能代表不同含義，如互動按鈕和普通文字。
- 確保顏色表達清晰一致。
2. 適配淺色與深色模式
- 自定義顏色需提供淺色、深色和高對比度變體。
3. 多環境測試
- 在不同光線（室外、夜晚）和裝置（True Tone 螢幕、HDR 電視、sRGB / P3 顯示器）上測試顏色效果。
4. 注意影象、半透明材質對顏色的影響
- 例如地圖 App 在衛星模式中使用深色主題。
5. 使用系統顏色選擇器
- 提供統一的顏色選擇體驗，並允許使用者儲存自定義顏色。
三、無障礙配色 Inclusive Color
- 顏色不應是傳達狀態或區分物件的唯一方式，需搭配文字或圖形。
- 避免低對比度組合，使所有使用者都能輕鬆閱讀和理解內容。
- 注意文化差異：紅色在某些文化中表示警告，在其他文化中則有正面含義。
四、系統顏色機制 System Colors
- 不要硬編碼系統顏色值，使用
ColorAPI 引用系統語義顏色。
- 動態顏色根據語義（如“背景”、“標題”、“分隔線”）定義，而非具體顏色值。
- 不要更改系統顏色的語義含義，如用“分隔線色”當作文字色。
五、Liquid Glass 配色 Liquid Glass Color
系統如何適配 Liquid Glass（System behavior）
Liquid Glass 是系統用於工具欄、標籤欄等小型 UI 元素的一種視覺材質，它根據背景內容自動在淺色與深色外觀之間切換：
- 背景較亮時，Liquid Glass 呈現較暗色調；
- 背景較暗時，Liquid Glass 呈現較亮色調；
- 涉及圖示和文字時，系統會自動採用單色（monochromatic）方案，保持與背景的對比度。
在較大的 UI 元素中（如側邊欄），Liquid Glass 會變得更不透明，以增強文字清晰度和內容承載能力。
謹慎使用顏色（Use color sparingly）
為減少視覺干擾，應限制顏色在 Liquid Glass 上的使用：
- 不要在所有 Liquid Glass 元素上氾濫使用顏色。
- 若確實需要顏色，建議僅用於強調性強的內容，如狀態指示、關鍵操作按鈕（例如“完成”按鈕），此時系統會自動為背景新增色彩以突出重點。
左側示例圖展示了濫用色彩的 toolbar 按鈕，右側則為推薦的精簡樣式。
在內容層使用顏色突出品牌（Use color in the content layer）
若你的應用在視覺上顯得平淡或品牌辨識度不足，建議在內容層調整配色，例如：
- 在可滾動內容頂部加入彩色 header；
- 使用品牌色點綴實際內容區域。
這種方式可以幫助應用展現品牌個性，同時不會分散使用者對主要內容的注意力。
- 注意：不要為了展示品牌而強行在所有 Liquid Glass 區域加入色彩。
右側示例圖展示瞭如何透過內容層色彩（如頁面標題背景）自然展現品牌風格。左圖為未突出品牌的介面，右圖為推薦做法。
六、色彩管理 Color Management
1. 色彩空間與色彩配置檔案
- 常用色彩空間：sRGB（標準）與 P3（寬色域）。
- 色彩配置檔案確保影象在不同裝置上的顏色一致性。
2. 寬色域支援
- 使用 P3 色彩空間和 PNG 格式（16 位/通道）以展示更豐富飽和的色彩。
- 可在 Xcode 的 Asset Catalog 中為不同色域提供影象與顏色變體。
七、平臺差異 Platform Considerations
iOS, iPadOS
- 系統與分組背景顏色：Primary、Secondary、Tertiary 表示層級。
- 動態前景色：用於標題、文字、連結等內容。
macOS
- 自 macOS 11 起支援應用指定強調色（Accent Color），當系統設定為“多彩”時生效。
tvOS
- 建議使用有限調色盤，避免僅用顏色指示焦點。
- 使用縮放與動效傳達互動性。
visionOS
- 在玻璃材質中謹慎用色，優先用於強調資訊或展示結構。
- 優選加粗文字或大面積區域上用色。
- 防止強對比亮色在暗背景下造成視覺不適。
watchOS
- 背景色應傳達含義，如健身環配色。
- 長時間顯示檢視避免使用全屏背景色。
- 圖形複雜錶盤（Complications）應支援單色模式。